<template>
  <el-dialog v-dialogDrag
    :title="this.isMul?'车型选择多选':'车型选择单选'"
    :visible="isDialogVisible"
    width="1000px"
    center
    :append-to-body="true"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <dialogHeader
      slot="title"
      :title="this.isMul?'车型选择多选':'车型选择单选'"
      :styleType="$store.state.app.dialogType"
    ></dialogHeader>
    <div class="filter-container filter-params">
      <!-- ref dynamicFormFields dynamicFieldsData -->
      <mix-form
        ref="queryCarForm"
        :dynamicFormFields="queryCarFields"
        :dynamicFieldsData="queryCarData"
        :isSearch="true"
      ></mix-form>
      <div class="filter-container filter-params">
        <!-- name dynamicButtons dynamicComponents -->
        <mix-button
          name="queryCarBtns"
          size="medium"
          :dynamicButtons="btns"
          :dynamicComponents="queryCarFields"
          :isShowMore="false"
        ></mix-button>
      </div>
    </div>

    <mix-table
      ref="carTypeResult"
      :isDialog="true"
      :multipleSelect="this.isMul?'selection':'index'"
      :isMore="true"
      :isPaging="true"
      :queryParams="tableParams"
      :dynamicTableCols="tableCols"
      @rowClick="rowClick"
      @dbClickRow="handleDbclick"
      :tableHeight="270"
    ></mix-table>
    <div class="filter-container filter-params buttonClass">
      <mix-button
        name="confirmButton"
        size="medium"
        :dynamicButtons="confirmButton"
        :isShowMore="false"
      ></mix-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * changeCode 获取值
 * isMul 多选
 * isDialogVisible 显隐
 * carBrandDisabled 禁用车品牌
 * carSeriesDisabled 禁用车系
 * close  关闭
 */
// 引入mix系列
import mixForm from "@/components/basicComponent/mixForm";
import mixButton from "@/components/basicComponent/mixButton";
import mixTable from "@/components/basicComponent/mixTable";
import { log } from "util";
// 引入API
import { seApis } from "@/api/apiList/se";
export default {
  components: {
    mixForm,
    mixButton,
    mixTable,
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  // 传的属性
  props: {
    isDialogVisible: { default: false, type: Boolean },
    isMul: { type: Boolean, default: true },
    // 控制车辆品牌组件是否可编辑
    carBrandDisabled: { type: Boolean, default: false },
    carSeriesDisabled: { type: Boolean, default: false }
    // 车品牌和车系编号
    // carBrandCode: { type: String, default: "" },
    // carSeriesCode: { type: String, default: "" }
  },
  watch: {
    isDialogVisible(cur, old) {
      if (cur === true) {
        let that = this;
        if (that.hasWatch === false) {
          that.hasWatch = true;
          that.$nextTick(() => {
            that.$utils.watchComp(
              that,
              false,
              "queryCarData",
              false,
              "queryCarFields",
              "queryCarForm"
            );
          });
        }
      }
    },
    carBrandDisabled(cur) {
      this.carBrandDisabledData = cur;
      this.queryCarFields[0].disabled = cur;
    },
    carSeriesDisabled(cur) {
      this.carSeriesDisabledData = cur;
      this.queryCarFields[1].disabled = cur;
    }
  },
  data() {
    return {
      // carBrandDisabled 控制 carBrandDisabledData
      carBrandDisabledData: this.carBrandDisabled,
      carSeriesDisabledData: this.carSeriesDisabled,
      // 只运行一次comWatch
      hasWatch: false,
      // 行数据
      rowData: [],
      // form布局
      queryCarFields: [
        {
          label: "车辆品牌",
          compKey: "carBrandCodeKey",
          isMust: true,
          codeField: "carBrandCode",
          isShowLabel: true,
          sendCode: () => {},
          focusCode: () => {},
          changeCode: (val, lab) => {
            this.queryCarData.carBrandCode = val;
            setTimeout(function() {
              this.queryCarData.carSeriesCode = "";
            }, 100);
          },
          isComponent: true,
          disabled: this.carBrandDisabled,
          component: () => import("@/components/org/carBrand/carBrand")
        },
        {
          label: "车系",
          compKey: "carSeriesCodeKey",
          codeField: "carSeriesCode",
          sendCode: () => {},
          focusCode: () => {},
          parentFileds: "carBrandCode",
          isShowLabel: true,
          placeholder: " ",
          disabled: this.carSeriesDisabled,
          changeCode: code => {
            this.queryCarData.carSeriesCode = code;
          },
          isComponent: true,
          component: () => import("@/components/se/chooseCarSeriesSelect.vue")
        },
        {
          label: "车型",
          codeField: "carTypeCode",
          type: "inputTxt"
        }
      ],
      // form数据
      queryCarData: {
        carBrandCode: "",
        carSeriesCode: "",
        carTypeCode: ""
      },
      // button布局
      btns: [
        {
          name: "search",
          text: "查询",
          clickEvent: this.fetch,
          position: "right",
          size: "medium",
          type: "primary"
        },

        {
          name: "reset",
          text: "重置",
          clickEvent: this.resetSearchForm,
          position: "right",
          size: "medium"
        }
      ],
      confirmButton: [
        {
          name: "confirm",
          text: "确认",
          clickEvent: this.chooseData,
          position: "right",
          type: "primary",
          size: "medium"
        }
      ],
      // table查询Api
      tableParams: {
        APIUrl: seApis.seChooseCarTypeQueryFind.APIUrl,
        InputType: seApis.seChooseCarTypeQueryFind.InputType,
        ServiceCode: seApis.seChooseCarTypeQueryFind.ServiceCode,
        dataInfo: {
          carBrandCode: "",
          carSeriesCode: "",
          carTypeCode: ""
        },
        apiQueryRow: [
          "brandType",
          "carBrandCn",
          "carBrandCode",
          "carSeriesCn",
          "carSeriesCode",
          "carTypeCn",
          "carTypeCode",
          "createdDate",
          "createdName",
          "creator",
          "groupCode",
          "groupId",
          "isEnable",
          "isSelect",
          "lastUpdatedDate",
          "modifier",
          "modifyName",
          "mycatOpTime",
          "oemCode",
          "oemId",
          "sCarseriesCode",
          "sCarseriesDesc",
          "sdpOrgId",
          "sdpUserId",
          "updateControlId"
        ]
      },

      // table布局
      tableCols: [
        { label: "车辆品牌", codeField: "carBrandCn", width: 220 },
        { label: "车系编码", codeField: "carSeriesCode", width: 140 },
        { label: "车系名称", codeField: "carSeriesCn", width: 200 },
        // { label: "车型中文名", codeField: "carTypeCn", width: 200 },
        { label: "车型编码", codeField: "carTypeCode" },
        { label: "车型名称", codeField: "carTypeCn" }
      ]
    };
  },
  // 方法
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.queryCarData.carTypeCode = "";
      // this.queryCarData.carSeriesCode = "";
      this.$refs.carTypeResult.tableData = [];
      this.$emit("close");
    },
    // btns方法
    // 查询
    fetch() {
      this.tableParams.dataInfo = this.queryCarData;
      this.$refs.carTypeResult.queryList();
      this.rowData = [];
    },
    // 确认选择数据
    chooseData() {
      let currentRow =
        this.isMul === true
          ? this.$refs.carTypeResult.currentRow
          : this.rowData;
      if (currentRow.length === 0) {
        this.$message({
          message: "请选择数据行！",
          type: "warning",
          duration: 2000
        });
        return;
      }
      let carTypeCode = [];
      currentRow.map(item => {
        carTypeCode.push(item.carTypeCode);
      });
      let codeStr = carTypeCode.join(",");
      // console.log(codeStr, "codeStr");
      this.$emit("changeCode", codeStr, currentRow);
      let that = this;
      setTimeout(function() {
        that.closeDialog();
      }, 100);
    },
    // 重置数据
    resetSearchForm() {
      let that = this;
      this.queryCarData.carTypeCode = "";
      if (!this.carBrandDisabledData) {
        this.queryCarData.carBrandCode = that.$store.getters.orgInfo.BRAND_CODE;
      }
      if (!this.carSeriesDisabledData) {
        this.queryCarData.carSeriesCode = "";
      }
      // if (!this.carBrandDisabled) {
      //   this.queryCarData.carBrandCode = this.carBrandCode;
      // }
      // if (!this.carSeriesDisabled) {
      //   this.queryCarData.carSeriesCode = "";
      // }
    },
    // 点击行事件
    rowClick(rowData) {
      if (this.isMul) {
        return;
      }
      // console.log(rowData, "rowData");
      this.rowData = [...rowData];
    },
    handleDbclick(row){
      if(!this.isMul){
        this.rowClick(row)
        this.chooseData()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-container.filter-params.buttonClass {
  padding: 0;
  margin-top: -15px;
}
</style>
